import React from "react";
import store from "../../../store/wwj/index";
import { SET_RADIO } from "../../../store/wwj/actionCreator";
import { Carousel, WingBlank } from "antd-mobile";
import "../../../assets/wwj/radio.banner.css";
class Radio extends React.Component {
  componentDidMount() {
    store.dispatch(SET_RADIO());
    setTimeout(() => {
      this.setState({
        data: [
          "http://p1.music.126.net/RFXAMuIa3LQhRraQ9Gqc9Q==/109951164427794107.jpg",
          "http://p1.music.126.net/1f_ATbbeFbVygzeHeJt6WQ==/109951164427773359.jpg",
          "http://p1.music.126.net/Rsd-5LSWsK9FoB9mcsDCAQ==/109951164427781156.jpg"
        ]
      });
    }, 100);
  }
  state = {
    data: ["1", "2", "3"],
    imgHeight: 176
  };
  sendindex(index) {
    alert("此电台需要付费使用");
    let a = store.getState().radio[index];
    localStorage.setItem("radiorem", JSON.stringify(a));
    // this.props.history.push("/detail");
  }
  render() {
    let radio = store.getState().radio;
    return (
      <WingBlank>
        <Carousel
          className="space-carousel"
          frameOverflow="visible"
          cellSpacing={10}
          slideWidth={0.8}
          autoplay
          infinite
          beforeChange={(from, to) =>
            console.log(`slide from ${from} to ${to}`)
          }
          afterChange={index => this.setState({ slideIndex: index })}
        >
          {this.state.data.map((val, index) => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{
                display: "block",
                position: "relative",
                top: this.state.slideIndex === index ? -10 : 0,
                height: this.state.imgHeight,
                boxShadow: "2px 1px 1px rgba(0, 0, 0, 0.2)"
              }}
            >
              <img
                src={`${val}`}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            </a>
          ))}
        </Carousel>
        <div className="radiorem">推荐电台</div>
        <div className="main">
          {radio.map((item, index) => {
            return (
              <div key={index} className="pic">
                <div className="pic1">
                  <img
                    className="pic2"
                    src={item.picUrl}
                    onClick={this.sendindex.bind(this, index)}
                  />
                </div>
                <div className="pic3">{item.name}</div>
              </div>
            );
          })}
        </div>
      </WingBlank>
    );
  }
}
export default Radio;
